<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单元素</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}ztree/css/zTreeStyle/zTreeStyle.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md3">

      <div class="layui-card">
        <div class="layui-collapse">
          <div class="layui-colla-item">
            <h2 class="layui-colla-title"
                style="padding:0;text-align:center;height:39px;line-height:39px;">参数分类</h2>
            <div class="layui-colla-content layui-show">
              <div class="input-search mb-10" style="display: none;">
                <input type="text" class="layui-input layui-input-sm"
                       style="border-radius: 15px;"
                       id="jstree_left_search" name="jstree_left_search"
                       placeholder="快速查找...">
              </div>
              <ul id="treeDemo" class="ztree"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md9 layui-form-pane">
      <div class="layui-card">

        <div class="layui-card-body">
          <div class="layui-card">
            <div class="layui-card-header">系统配置</div>




            <div class="layui-row">

              <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off"
                           class="layui-input"
                           placeholder="参数名称">
                  </div>
                </div>
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off"
                           class="layui-input"
                           placeholder="参数编码">
                  </div>
                </div>
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <input type="text" name="value" autocomplete="off"
                           class="layui-input"
                           placeholder="参数值">
                  </div>
                </div>

                <div class="layui-inline">
                  <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                  </button>
                  <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
                </div>

              </div>

            </div>


            <div class="layui-card-body">
              <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
              <script type="text/html" id="test-table-operate-barDemo">

                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

              </script>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery-1.4.4.min.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery.ztree.core.js"></script>
<script>
    var index_url="{{url('admin/config/group')}}";
    var add_url="{{url('admin/config/add')}}";
    var edit_url="{{url('admin/config/edit')}}";
    var reload_table;
    var select_menuid;
    layui.config({
        base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        var table = layui.table;
        //====================获取访问token=======================
        var localToken = layui.data('token');

        //=========================生成表格=================================
        table.render({
            elem: '#test-table-reload'
            ,url: index_url
            ,headers:{token:localToken.access_token}
            ,method:'post'
            ,cols: [[
                {field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'sort', title: '排序', width:80, sort: true, fixed: true,edit: 'text'}
                ,{field:'name', title: '配置名称', width:220, sort: true, fixed: true}
                ,{field:'title', title: '配置说明', width:220, sort: true, fixed: true}
                ,{field:'value', title: '对应值', width:220, sort: true, fixed: true}
                ,{field:'status', title: '状态', width:80, sort: true, fixed: 'right',templet:temp_switch_tpl}
                ,{width:120,title:'操作',align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
            //进行按钮操作
            ,page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
        //===========================表格编辑处理=================================================
        table.on('tool(test-table-reload)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '编辑:'+data.title
                    ,shade: false
                    , area: ['700px', '580px'] //宽高
                    ,btn: ['确定', '取消']
                    ,content: edit_url+'/'+data.id
                    ,zIndex: layer.zIndex //重点1
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                    ,success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });


        form.on('switch(component-switch)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });

        });


        //=========================按钮事件=======================
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });
        //===========================外部按钮事件=====================
        var active = {
            add: function(){
                layer.open({
                    type: 2
                    ,title: '新增配置'
                    ,content: add_url+ "?menuid=" + select_menuid
                    ,maxmin: true
                    , area: ['700px', '580px'] //宽高
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                });
                return false;
            }
        };

        reload_table=table;
    });
</script>

<SCRIPT type="text/javascript">
    //==========================ztree树成生成与事件================================
    <!--
    var setting = {
        view: {
            nameIsHTML: true,
            showIcon: false,
            showLine: true,
            txtSelectedEnable: false,
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    var zNodes ={!! $menu_list !!};
    var  className = "dark";
    //自定义节点
    function addDiyDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        var addStr = "<i class='" + treeNode.icon + "'></i>&nbsp;";
        //在节点前加入 ICON 图标
        sObj.before(addStr);
        var addStr = "&nbsp;(" + treeNode.id + ")";
        sObj.after(addStr);
    }
    function onClick(event, treeId, treeNode, clickFlag) {
        select_menuid = treeNode.id;
        reload_table.reload('test-table-reload', {
            where: {type:treeNode.id}
        });
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds();
        return (h+":"+m+":"+s);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->

    function temp_switch_tpl(d){
        if(d.status==1){
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" lay-filter="component-switch"  checked >';
        }else{
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" lay-filter="component-switch">';
        }

    }
</SCRIPT>
</body>
</html>